<template>
	<div class="font-group">
		<div class="font-group-content">
			<div class="ali-line v-alignment">
				<span class="radio-option" :class="{active: val===item.type}" v-for="(item,index) in align"
					:key="index" @click="change(item)">
					<div class="radio-content">
						<svg-icon class="svg-icon" :icon="item.icon"></svg-icon>
					</div>
				</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			value: String,
			type: {
				type: String
			},
			placeholder: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				val: this.value,
				align: [{
					icon: 'align-top',
					type: 'flex-start'
				}, {
					icon: 'align-middle',
					type: 'center'
				}, {
					icon: 'align-bottom',
					type: 'flex-end'
				}]
			}
		},
		methods: {
			change(data) {
				this.val = data.type;
				this.$emit("change", {
					key: this.type,
					value: this.val
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.font-group {
		width: 100%;

		.title {
			font-size: 12px;
			height: 24px;
			line-height: 24px;
			min-width: 69px;
			text-align: right;
			margin-right: 6px;
		}

		.font-group-content {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.v-alignment {
			width: 100%;
			height: 24px;

			.radio-option {
				display: block;
				width: 24px;
				height: 24px;

				&:hover {
					background: #ddd;
				}

				.svg-icon {
					width: 24px;
					height: 24px;
					color: rgb(51, 51, 51);
				}
			}
		}

		.ali-line {
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}

		.active {
			background: #ddd;
		}

		.radio-line {
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.svg-icon {
			width: 32px;
			height: 32px;
			color: #333;
		}
	}
</style>
